import React, {
  ComponentType,
  createRef,
  useEffect,
  useRef,
  useState,
} from 'react';
import { View, Text, FlatList } from 'react-native';
import { CommentType, ResponseType } from 'types';

export type ResponseListType = {
  hasMore: boolean;
  list: [];
};
export type VirgetParamType = {
  offset: number;
};
/**
 * getDataFn - 请求数据函数 接收offset 返回{list, hasMore}
 */
interface PropsType {
  getDataFn: (props: VirgetParamType) => Promise<ResponseListType>; // 请求数据函数返回
  renderItem: (props: any) => JSX.Element;
  keyExtractor: (item: any, index: number) => string;
  freshForce?: any;
  autoTop?:boolean;
  LisHeaderComponent?: JSX.Element;
  ListFooterComponent?: JSX.Element;
  ListEmptyComponent?: JSX.Element;
  changeItem?: (originData: [], changeCb: any) => void;
}
export default function VirScroll(props: PropsType) {
  let flatRef = useRef(null);
  const {
    getDataFn,
    renderItem,
    keyExtractor,
    freshForce,
    autoTop,
    LisHeaderComponent,
    ListFooterComponent,
    ListEmptyComponent,
  } = props;
  const [listData, setListData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState<string | null>(null);
  const isEndReached = React.useRef(false);
  const isFetching = React.useRef(false);
  const getListData = async (isRefresh?: boolean) => {
    if (isFetching.current) {
      return;
    }
    if (!isRefresh && isEndReached.current) {
      return;
    }
    isFetching.current = true;
    setLoading(isRefresh ? 'refresh' : 'more');
    const { list, hasMore }: ResponseListType = await getDataFn({
      offset: isRefresh ? 0 : offset,
    });
    console.log('jie',list.length,hasMore);
    
    setLoading(null);
    if (list && list.length > 0) {
      let currentCount;
      if (isRefresh) {
        currentCount = list.length;
        setListData(list);
        // 刷新后是否自动返回顶部
        if(autoTop){
        ((flatRef.current as any) as FlatList).scrollToIndex({
          index: 0,
          viewPosition: 0,
        });
      }
      } else {
        currentCount = offset + list.length;
        setListData(listData.concat(list));
      }
      setOffset(currentCount);
      if (!hasMore) {
        isEndReached.current = true;
      } else {
        isEndReached.current = false;
      }
    } else if (isRefresh) {
      // 刷新且无数据
      setListData([]);
    }

    isFetching.current = false;
  };
  useEffect(() => {
    getListData(true);
    //getChannels();
  }, [freshForce]);
  if (props.changeItem) {
    props.changeItem([...listData as []], setListData)
  }
  return (
    <View style={{ flex: 1 }}>
      <FlatList<Event>
        ref={flatRef}
        ListHeaderComponent={LisHeaderComponent}
        data={listData}
        refreshing={loading === 'refresh'}
        onRefresh={() => getListData(true)}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        onEndReached={() => getListData()}
        ListFooterComponent={ListFooterComponent}
        ListEmptyComponent={ListEmptyComponent}
      />
    </View>
  );
}
